<template>
	<view v-if="personal.user_id" class="container" :style="appThemeStyle">
		<view class="account-panel u-text-pink7 dis-flex flex-y-center">
			<view class="panel-lable">
				<text>账户余额</text>
			</view>
			<view class="panel-balance flex-box">
				<text>￥{{ personal.balance }}</text>
			</view>
		</view>
		<view class="recharge-panel">
			<view class="recharge-label">
				<text>充值金额</text>
			</view>
			<view class="recharge-plan clearfix">
				<block v-for="(item, index) in planList" :key="index">
					<view class="recharge-plan_item" :class="{ active: selectedPlanId == item.plan_id }"
						@click="onSelectPlan(item.plan_id)">
						<view class="plan_money">
							<text>{{ item.money }}</text>
						</view>
						<view class="plan_gift">
							<text>送{{ item.gift_money }}</text>
						</view>
					</view>
				</block>
			</view>
			<!-- 手动充值输入框 -->
			<view class="recharge-input" v-if="setting.is_custom == 1">
				<input class="input" type="digit" placeholder="可输入自定义充值金额" v-model="inputValue"
					@input="onChangeMoney" />
			</view>

			<!-- 支付方式 -->
			<view class="recharge-label m-top60">
				<text>支付方式</text>
			</view>
			<view class="payment-method">
				<view v-for="(item, index) in methods" :key="index" class="pay-item dis-flex flex-x-between"
					@click="handleSelectPayType(index)">
					<view class="item-left dis-flex flex-y-center">
						<view class="item-left_icon" :class="[item.method]">
							<text class="iconfont" :class="[PayMethodIconEnum[item.method]]"></text>
						</view>
						<view class="item-left_text">
							<text>{{ PayMethodEnum[item.method].name }}</text>
						</view>
					</view>
					<view class="item-right col-m" v-if="curPaymentItem && curPaymentItem.method == item.method">
						<text class="iconfont icon-check u-text-pink2"></text>
					</view>
				</view>
			</view>

			<!-- 确认按钮 -->
			<view class="recharge-submit btn-submit">
				<form @submit="onSubmit">
					<button class="button u-text-pink3" formType="submit" :disabled="disabled">立即充值</button>
				</form>
			</view>
		</view>
		<!-- 充值描述 -->
		<view class="describe-panel">
			<view class="recharge-label">
				<text>充值说明</text>
			</view>
			<view class="content">
				<text space="ensp">{{ setting.describe }}</text>
			</view>
		</view>

		<!-- 支付确认弹窗 -->
		<!-- #ifdef H5 -->
		<u-modal v-if="tempUnifyData" v-model="showConfirmModal" title="支付确认" show-cancel-button confirm-text="已完成支付"
			:confirm-color="appTheme.mainBg" negative-top="100" :asyncClose="true"
			@confirm="onTradeQuery(tempUnifyData.outTradeNo, tempUnifyData.method)">
			<view class="modal-content">
				<text>请在{{ PayMethodClientNameEnum[tempUnifyData.method] }}内完成支付，如果您已经支付成功，请点击“已完成支付”按钮</text>
			</view>
		</u-modal>
		<!-- #endif -->

	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import * as RechargeApi from '@/api/recharge'
	import {
		PayMethodEnum
	} from '@/common/enum/payment'
	import {
		inArray,
		urlEncode
	} from '@/utils/util'
	import {
		Alipay,
		Wechat
	} from '@/core/payment'

	// 支付方式对应的图标
	const PayMethodIconEnum = {
		[PayMethodEnum.WECHAT.value]: 'icon-wechat-pay',
		[PayMethodEnum.ALIPAY.value]: 'icon-alipay',
	}

	// 支付方式的终端名称
	const PayMethodClientNameEnum = {
		[PayMethodEnum.WECHAT.value]: '微信',
		[PayMethodEnum.ALIPAY.value]: '支付宝'
	}

	// H5端支付下单时的数据
	// 用于从第三方支付页返回到收银台页面后拿到下单数据
	const getTempUnifyData = orderKey => {
		// if (window.performance && window.performance.navigation.type == 2) {
		const tempUnifyData = storage.get('tempUnifyData_' + orderKey)
		if (tempUnifyData) {
			storage.remove('tempUnifyData_' + orderKey)
			return tempUnifyData
		}
		// }
		return null
	}

	export default {
		data() {
			return {
				// 正在加载
				isLoading: true,
				// 按钮禁用
				disabled: false,
				// 枚举类
				PayMethodEnum,
				PayMethodIconEnum,
				PayMethodClientNameEnum,
				// 个人信息
				personal: {
					balance: '0.00'
				},
				// 充值设置
				setting: {},
				// 充值方案列表
				planList: [],
				// 当前客户端的支付方式列表（后端根据platform判断）
				methods: [],
				// 当前选中的套餐ID
				selectedPlanId: 0,
				// 自定义金额
				inputValue: '',
				// 当前选中的支付方式
				curPaymentItem: null,
				// 支付确认弹窗
				showConfirmModal: false,
				// #ifdef H5
				// 当前第三方支付信息 (临时数据, 仅用于H5端)
				tempUnifyData: {
					outTradeNo: '',
					method: ''
				},
				// #endif
			}
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			// 获取页面数据
			this.getPageData()
		},

		methods: {

			// 选择充值套餐
			onSelectPlan(planId) {
				this.selectedPlanId = planId
				this.inputValue = ''
			},

			// 金额输入框
			onChangeMoney({
				detail
			}) {
				this.inputValue = detail.value
				this.selectedPlanId = 0
			},

			// 选择支付方式
			handleSelectPayType(index) {
				this.curPaymentItem = this.methods[index]
			},

			// 获取页面数据
			getPageData() {
				const app = this
				app.isLoading = true
				return new Promise((resolve, reject) => {
					RechargeApi.center({
							client: app.platform
						})
						.then(result => {
							app.setting = result.data.setting
							app.personal = result.data.personal
							app.planList = result.data.planList
							app.methods = result.data.paymentMethods
							app.isLoading = false
							// 默认选中的支付方式
							app.setDefaultPayType()
							// #ifdef H5
							// 判断当前页面来源于浏览器返回
							this.performance()
							// #endif
						})
				})
			},

			// 默认选中的支付方式
			setDefaultPayType() {
				if (!this.curPaymentItem) {
					this.handleSelectPayType(0)
				}
			},

			// 判断当前页面来源于浏览器返回并提示手动查单
			// #ifdef H5
			performance() {
				const app = this
				const performanceData = getTempUnifyData('recharge')
				if (performanceData) {
					app.tempUnifyData = performanceData
					app.showConfirmModal = true
				}
			},
			// #endif

			// 立即充值
			onSubmit(e) {
				const app = this
				// 判断是否选择了支付方式
				if (!app.curPaymentItem) {
					app.$toast('您还没有选择支付方式')
					return
				}
				// 按钮禁用
				if (app.disabled) return
				app.disabled = true
				// 提交到后端
				RechargeApi.submit({
						planId: app.selectedPlanId,
						customMoney: app.inputValue ? app.inputValue : '',
						method: app.curPaymentItem.method,
						client: app.platform,
						extra: app.getExtraAsUnify(app.curPaymentItem.method)
					})
					.then(result => app.onSubmitCallback(result))
					.finally(err => {
						setTimeout(() => app.disabled = false, 10)
					})
			},

			// 获取第三方支付的扩展参数
			getExtraAsUnify(method) {
				if (method === PayMethodEnum.ALIPAY.value) {
					return Alipay.extraAsUnify()
				}
				if (method === PayMethodEnum.WECHAT.value) {
					return Wechat.extraAsUnify()
				}
				return {}
			},

			// 订单提交成功后回调
			onSubmitCallback(result) {
				const app = this
				const method = app.curPaymentItem.method
				const paymentData = result.data.payment
				// 余额支付
				if (method === PayMethodEnum.BALANCE.value) {
					app.onShowSuccess(result)
				}
				// 发起支付宝支付
				if (method === PayMethodEnum.ALIPAY.value) {
					console.log('paymentData', paymentData)
					Alipay.payment({
							orderKey: 'recharge',
							...paymentData
						})
						.then(res => app.onPaySuccess(res))
						.catch(err => app.onPayFail(err))
				}
				// 发起微信支付
				if (method === PayMethodEnum.WECHAT.value) {
					console.log('paymentData', paymentData)
					Wechat.payment({
							orderKey: 'recharge',
							...paymentData
						})
						.then(res => app.onPaySuccess(res))
						.catch(err => app.onPayFail(err))
				}
			},

			// 订单支付成功的回调方法
			// 这里只是前端支付api返回结果success,实际订单是否支付成功 以后端的查单和异步通知为准
			onPaySuccess({
				res,
				option: {
					isRequireQuery,
					outTradeNo,
					method
				}
			}) {
				const app = this
				// 判断是否需要主动查单
				// isRequireQuery为true代表需要主动查单
				if (isRequireQuery) {
					app.onTradeQuery(outTradeNo, method)
					return true
				}
				this.onShowSuccess(res)
			},

			// 显示支付成功信息并页面跳转
			onShowSuccess({
				message
			}) {
				this.$toast(message || '订单支付成功')
				this.onSuccessNav()
			},

			// 订单支付失败
			onPayFail(err) {
				console.log('onPayFail', err)
				const errMsg = err.message || '订单未支付'
				this.$error(errMsg)
			},

			// 已完成支付按钮事件: 请求后端查单
			onTradeQuery(outTradeNo, method) {
				const app = this
				// 交易查询
				// 查询第三方支付订单是否付款成功
				RechargeApi.tradeQuery({
						outTradeNo,
						method,
						client: app.platform
					})
					.then(result => result.data.isPay ? app.onShowSuccess(result) : app.onPayFail(result))
					.finally(() => app.showConfirmModal = false)
			},

			// 支付成功后的跳转
			onSuccessNav() {
				const pages = getCurrentPages()
				const lastPage = pages.length < 2 ? null : pages[pages.length - 2]
				const backRoutes = ['pages/wallet/index']
				if (lastPage && inArray(lastPage.route, backRoutes)) {
					setTimeout(() => uni.navigateBack(), 1000)
				} else {
					setTimeout(() => {
						this.$navTo('pages/wallet/index', {}, 'redirectTo')
					}, 1200)
				}
			},

		}
	}
</script>

<style>
	page{
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding-bottom: 70rpx;
	}

	.m-top60 {
		margin-top: 60rpx;
	}

	// 账户面板
	.account-panel {
		width: 650rpx;
		height: 180rpx;
		margin: 50rpx auto;
		padding: 0 60rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		color: #fff;
		// background: linear-gradient(-125deg, #a46bff, #786cff);
		box-shadow: 0 5px 22px 0 rgba(0, 0, 0, 0.26);
	}

	.panel-lable {
		font-size: 32rpx;
	}

	.recharge-label {
		color: rgb(51, 51, 51);
		font-size: 30rpx;
		margin-bottom: 25rpx;
	}

	.panel-balance {
		text-align: right;
		font-size: 46rpx;
	}

	.recharge-panel {
		margin-top: 60rpx;
		padding: 0 60rpx;
	}

	// 充值套餐
	.recharge-plan {
		margin-bottom: -20rpx;

		.recharge-plan_item {
			width: 31.3%;
			padding: 20rpx 0;
			float: left;
			text-align: center;
			color: #888;
			border: 1rpx solid rgb(228, 228, 228);
			border-radius: 10rpx;
			margin: 0 20rpx 20rpx 0;

			&:nth-child(3n + 0) {
				margin-right: 0;
			}

			&.active {
				color: #7ca934;
				border: 1px solid #7ca934;
				// color: #786cff;
				// border: 1rpx solid #786cff;

				.plan_money {
					color: #7ca934;
					// color: #786cff;
				}
			}
		}
	}

	.plan_money {
		font-size: 32rpx;
		color: rgb(82, 82, 82);
		font-weight: bold;
	}

	.plan_gift {
		font-size: 24rpx;
		margin-top: 4rpx;
	}

	.recharge-input {
		margin-top: 40rpx;

		.input {
			display: block;
			border: 1rpx solid rgb(228, 228, 228);
			border-radius: 10rpx;
			padding: 15rpx 25rpx;
			font-size: 27rpx;
		}
	}

	// 立即充值
	.recharge-submit {
		margin-top: 70rpx;
	}

	.btn-submit {
		.button {
			font-size: 30rpx;
			// background: #786cff;
			border: none;
			color: white;
			border-radius: 50rpx;
			padding: 0 120rpx;
			line-height: 3;
		}

		.button[disabled] {
			background: #e85959;
			border-color: #e85959;
			color: white;
		}
	}

	// 充值说明
	.describe-panel {
		margin-top: 50rpx;
		padding: 0 60rpx;

		.content {
			font-size: 26rpx;
			line-height: 1.6;
			color: #888;
		}
	}

	// 支付方式
	.payment-method {

		.pay-item {
			padding: 14rpx 0;
			font-size: 26rpx;

			.item-left_icon {
				margin-right: 20rpx;
				font-size: 44rpx;

				&.wechat {
					color: #00c800;
				}

				&.alipay {
					color: #009fe8;
				}

			}

			.item-left_text {
				font-size: 30rpx;
			}

			.item-right {
				font-size: 30rpx;
			}

			.user-balance {
				margin-left: 20rpx;
				font-size: 26rpx;
			}
		}

	}

	// 支付确认弹窗
	.modal-content {
		padding: 40rpx 48rpx;
		font-size: 30rpx;
		line-height: 50rpx;
		text-align: left;
		color: #606266;
		// height: 620rpx;
		box-sizing: border-box;
	}
</style>